<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row type="flex" class="h-100">
			<div class="slide flex-column">
				<div class="title pb-1">产品</div>
				<cl-flex1 style="overflow: auto">
					<el-tree
						:data="list"
						:props="defaultProps"
						:default-expanded-keys="expandedTreeKeys"
						node-key="id"
						@node-click="handleNodeClick"
					/>
				</cl-flex1>
			</div>
			<cl-flex1 style="overflow: hidden" class="pl-1 h-100">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<span class="title">{{ currNode.name }}</span>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search">
									<cl-filter label="产品标签">
										<cl-select
											v-model="search.tag_id"
											placeholder="全部"
											clearable
											style="width: 100%"
											filterable
										>
											<el-option
												v-for="item in tagList"
												:key="item.id"
												:label="item.tname"
												:value="item.id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="关键字">
										<el-input
											v-model="search.keyword"
											placeholder="产品名称"
											clearable
											@change="refresh()"
										/>
									</cl-filter>
								</cl-filter-group>
								<el-button icon="el-icon-plus" size="small" type="primary" @click="openForm()">
									新增产品
								</el-button>
							</div>
						</el-row>
					</template>
					<cl-table v-bind="table">
						<cl-empty slot="empty" />
						<template #column-cover="{ scope: { row } }">
							<div class="flex flex-align-center">
								<cl-avatar
									:src="row.picture_url || ''"
									shape="square"
									class="mr-1"
								/>
								<cl-flex1 style="text-align: left" class="ellipsis">
									{{ row.sr_name }}
								</cl-flex1>
							</div>
						</template>
						<template #column-status="{ scope: { row } }">
							<el-tag v-if="row.status == 1">上架</el-tag>
							<el-tag type="danger" v-else>下架</el-tag>
						</template>
						<template #column-opt="{ scope: { row } }">
							<div class="flex flex-align-start">
								<el-button type="primary" @click="openForm('edit', row)">
									修改
								</el-button>
								<el-button type="danger" @click="del(row)"> 删除 </el-button>
							</div>
						</template>
					</cl-table>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<!-- 新增、修改 -->
		<product-form ref="productForm" :info="info" @confirm="refresh" />
	</cl-crud>
</template>
<script>
import ProductForm from "./product-form";
export default {
	provide() {
		return {
			parent: this
		};
	},
	components: {
		ProductForm
	},
	data() {
		return {
			list: [],
			expandedTreeKeys: [],
			defaultProps: {
				children: "childlist",
				label: "name"
			},
			search: {
				keyword: "",
				s_category: "",
				tag_id: "",
				biz_id: "",
				level: ""
			},
			table: {
				"context-menu": ["refresh"],
				props: {
					maxHeight: 500
				},
				columns: [
					{
						label: "产品",
						prop: "cover",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "成本价格（￥）",
						prop: "cost_price",
						width: 120,
						formatter: row => `${this.toFixed(row.cost_price)}`
					},
					{
						label: "产品售价（￥）",
						prop: "price",
						width: 120,
						formatter: row => `${this.toFixed(row.price)}`
					},
					{
						label: "产品原价（￥）",
						prop: "price_label",
						width: 120,
						formatter: row => `${this.toFixed(row.price_label)}`
					},
					{
						label: "产品标签",
						prop: "tname",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "状态", prop: "status", width: 80 },
					{ label: "操作", prop: "opt", width: 150, fixed: "right" }
				]
			},
			info: {},
			tagList: [],
			currNode: {},
			tableHeight: 500,
			load: false
		};
	},

	async created() {
		await this.getTree();
		await this.getTagList();
	},
	methods: {
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		handleNodeClick(e) {
			if (e.level < 1) return;
			this.currNode = e;
			const { biz_id, id, level } = this.currNode;
			this.search = {
				s_category: id,
				biz_id,
				level,
				tag_id: ""
			};
			this.getTagList();
			this.refresh();
		},
		async getTree() {
			const list = await this.$service.service.getItemTree({ type: 2 });
			if (!list.length) return;
			this.list = list;
			let first = list[0];
			this.expandedTreeKeys = [first.id];
			this.currNode = first?.childlist[0] ?? {};
			const { biz_id, id, level } = this.currNode;
			this.search = {
				s_category: id,
				biz_id,
				level
			};
			this.refresh();
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.serviceproduct)
				.set("dict", {
					api: {
						page: "getByCategory"
					}
				})
				.done();
			app.refresh();
		},
		async onRefresh(params, { next, done, render }) {
			if (!this.load) {
				render([]);
				return;
			}
			const { biz_id, id, level } = this.currNode;
			let { list } = await next({
				...params,
				...this.search,
				s_category: id,
				biz_id,
				level
			});
			render(list);
		},
		//获取标签
		async getTagList() {
			const { biz_id } = this.search;
			this.tagList = [];
			if (!biz_id) return;
			const { lists } = await this.$service.tag.lists({ biz_id, type: 2, status: 1 });
			this.tagList = lists;
		},
		// crud刷新
		refresh(reset = true) {
			this.load = true;
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		//删除产品
		del({ biz_id, sr_id }) {
			this.confirm("是否执行此操作?")
				.then(async () => {
					await this.$service.serviceproduct.del({
						biz_id,
						sr_id
					});
					this.refresh();
					this.$message.success('"删除成功!"');
				})
				.catch(() => {
					this.$message.info("已取消删除");
				});
		},
		// 表单
		openForm(type = "add", data = {}) {
			this.$refs.productForm.open(type, data);
		}
	}
};
</script>
<style lang="scss" scoped>
.slide {
	box-shadow: 1px 0 1px -1px #969797;
	height: 100%;
	width: 230px;
}
.title {
	font-size: 18px;
}
::v-deep .el-tree-node__content {
	height: 40px !important;
}
</style>
